<template>
  <div class="bar-chart-25 chart" ref="barChart25"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart25 = ref(null);
const echarts = inject("$echarts");


const xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const seriesData = [120, 200, 150, 80, 70, 110, 130];

const createSvg = (shadowColor, shadowBlur) => `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        x="0px" y="0px" 
        viewBox="0 0 32 128"
        xml:space="preserve"
    >
        <style>
            .st2 {
                fill: transparent;
                stroke: ${shadowColor};
                stroke-width: ${shadowBlur}px;
                filter: url(#chart-inset-shadow);
            }
        </style>
        <defs>
            <filter id="chart-inset-shadow" width="200%" height="200%" x="-50%" y="-50%">
        		<feGaussianBlur in="SourceGraphic" result="gass" stdDeviation="${
              shadowBlur * 0.75
            }" />
        		<feMerge>
        			<feMergeNode in="gass" />
        		</feMerge>
        	</filter>
        </defs>
        <path class="st2" d="M0 0 L32 0 L32 128 L0 128 Z" />
    </svg>
`;

const svgString = createSvg("#156dff", 8);
const svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });

const DOMURL = window.URL || window.webkitURL || window;
const insetShadowUrl = DOMURL.createObjectURL(svg);

let option = {
  compCode: 'C202309016',
  backgroundColor: "#101631",
  xAxis: {
    type: "category",
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: "rgba(255,255,255, 0.5)",
    },
    splitLine: {
      show: false,
    },
    data: xAxisData
  },
  yAxis: {
    type: "value",
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: "rgba(255,255,255, 0.5)",
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(255,255,255,0.1)",
        width: 2,
      },
    },
  },
  series: [
    {
      data: seriesData,
      type: "pictorialBar",
      symbol: "image://" + insetShadowUrl,
      barWidth: 50,
    },
    {
      data: seriesData,
      type: "bar",
      barWidth: 50,
      itemStyle: {
        color: "transparent",
        borderWidth: 3,
        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#156dff",
          },
          {
            offset: 1,
            color: "#00eaeb",
          },
        ]),
        shadowColor: "blue",
        shadowBlur: 12,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
      },
    },
  ],
};



onMounted(() => {
  const chart = echarts.init(barChart25.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
